<template>
  <transition name="fade">
    <div class="container draggable-container"
      :style="{ width: widthNumber + 'px', left: positionLeft + 'px', zIndex: zIndex }" v-show="visible" v-draggable>
      <div class="title" v-draggable-child>
        <span>{{ title }}</span>
      </div>
      <div class="content">
        <slot name="content"></slot>
      </div>
      <div class="dialog-footer" v-draggable-child>
        <slot name="footer"></slot>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  name: "dialog-pop",
  components: {},
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: "自定义弹出层",
    },
    widthNumber: {
      type: Number,
      default: 1200,
    },
  },
  data() {
    return {
      positionLeft: 0,
      zIndex: 3,
    };
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
        }
      },
      deep: false,
      immediate: true,
    },
    widthNumber: {
      handler(val) {
        if (val) {
          this.positionLeft = (window.innerWidth - this.widthNumber) / 2;
        }
      },
      deep: false,
      immediate: true,
    },
  },
  methods: {
    handleClose(status) {
      this.$emit("update:visible", false);
      this.$emit("close", status === true ? status : false);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/styles/index.scss";

.container {
  position: absolute;
  // z-index: 3;
  box-sizing: border-box;
  border: 2px solid #fff;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 12px 0px;
  border-radius: 10px;
  padding: 10px;
  top: 15%;
  // left: 8%;
  background: #fff;

  .title {
    width: 100%;
    padding: 10px;
    border-radius: 5px 5px 0 0;

    span {
      font-size: 18px;
      font-weight: bold;
      color: $themeColor;
    }
  }

  .content {
    background: #fff;
    padding: 10px;
  }
}

.dialog-footer {
  width: 100%;
  padding: 10px;
  display: flex;
  justify-content: flex-end;
  border-radius: 0 0 5px 5px;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>
